<template>
	<view class="u-p-20">
		<view class="u-m-b-50 u-flex" v-for="(item,index) in data" :key="index">
			<view class="">
				<u-checkbox v-if='showCheckbox' @change="checkboxChange" :name='index' shape="circle"></u-checkbox>
			</view>
			<view class="u-flex-1 u-flex-col">
				<view class="u-flex u-font-34">
					<view class="u-m-r-50">
						{{item.name}}
					</view>
					<view class="u-m-r-30">
						{{item.tel}}
					</view>
					<u-tag text="默认" type='error' mode="dark" v-if='item.isDefault==1' />
				</view>
				<view class="u-flex u-m-t-10 u-tips-color u-row-between">
					<view style="max-width: 90%;">
						{{item.wholeAddressInfo}}
					</view>
					<u-icon name="edit-pen" size="40" @click="$u.route('/pages/shop/editAddr/editAddr',{id:item.id})"></u-icon>
				</view>
			</view>
		</view>
		<view class="" style="height: 150rpx;"></view>
		<view class="w-add u-flex u-row-center" @click="$u.route('/pages/shop/editAddr/editAddr')">
			<u-icon name="plus" color="#fff" size="36"></u-icon>
			<text class="u-m-l-20 u-font-36">新建收货地址</text>
		</view>
	</view>
</template>

<script>
	import {
		addressQueryByUser
	} from '@/api/shop.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				data:[],
				showCheckbox:false
			}
		},
		onLoad(e) {
			if(e.type){
				this.showCheckbox = true
			}
		},
		onShow() {
			this.addressQueryByUser()
		},
		methods: {
			checkboxChange(e){
				this.$store.commit('setAddress',this.data[e.name])
				this.$u.route({type:'back'})
			},
			addressQueryByUser(){
				addressQueryByUser({
					JSESSIONID: uni.getStorageSync('sessionid'),
					idUser: this.userInfo.id
				}).then(res=>{
					this.data = res
					res.forEach(item=>{
						if(item.isDefault==1){
							this.$store.commit('setAddress',item)
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.w-add{
	padding: 30rpx;
	background-color: red;
	color: #FFFFFF;
	border-radius: 60rpx;
	width: 80%;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 30rpx;
}
</style>
